<template>
  <div class="" :style="{
    height: '100%',
    '--imgw': getscalepx(1),
    '--imgh': getscalepx(3),
    '--imgr': getscalepx(-13),
    '--imgt': getscalepx(-5),
    '--imgp': getscalepx(5),
  }">
    <zzdatatable :header="header" :datalist="datalist" :coltype="''"/>
  </div>
</template>
<script>

import commonmixins from "@/mixins/bigScreen/commonmixins";
import axios from "@/utils/requestdp";
import qs from 'qs';

export default {
  name: "zzbpdatatable3",
  mixins: [commonmixins],
  components: {},
  data() {
    return {
      header: [],
      datalist: [],
      pids: [],
      tableData: []
    };
  },
  computed: {},
  watch: {},
  created() {
    
  },
  mounted() {
    let unitcolor = "#56C5FA";
    this.header = [
      {
        name: `<img class="img2" src="/configuration/2d/guanwangjiancedian.png" />`,
        flex: 15,
      },
      {
        name: `<span class="head">供温</span><span style="color: ${unitcolor};">(℃)</span>`,
        flex: 8,
      },
      {
        name: `<span class="head">回温</span><span style="color: ${unitcolor};">(℃)</span>`,
        flex: 8,
      },
      {
        name: `<span class="head">供压</span><span style="color: ${unitcolor};">(MPa)</span>`,
        flex: 8,
      },
      {
        name: `<span class="head">回压</span><span style="color: ${unitcolor};">(MPa)</span>`,
        flex: 8,
      },
      {
        name: `<span class="head">供水流量</span><span style="color: ${unitcolor};">(T/h)</span>`,
        flex: 10,
      },
    ];
    this.header = this.header.map((item) => {
      item.name = "<div>" + item.name + "</div>";
      return item;
    });
    this.loadData();
    this.interval = setInterval(() => {
      this.loadData();
    }, this.$root.setting.data.interval)
  },
  methods: {
    loadData() {
      let aaa = [];
      this.nameList = [];
      this.pids = [];
      let nameList = [];
      axios.get('/bigScreen/bigScreen').then(res => {
        let data = res.data.filter(v => v.attrName === 'measured_pids')[0].attrValue.split(',');
        data.forEach(v => {
          this.pids.push(v.split('@@')[1])
          nameList.push(v.split('@@')[2])
          this.nameList.push({
            pid: v.split('@@')[1],
            name: `<span class="name">${v.split('@@')[2]}</span>`
          })
        })
        // 关联告警
        this.warnList = [];
        axios.post('/warn/msg/list?pageNum=1&pageSize=3000', {
          objType: '011' // 表记告警
        }).then(rs => {
          let warnList = rs.rows;
          this.warnList = warnList.filter(w => this.pids.indexOf(w.pid) > -1)
          // 查询热源监控
          let queryJson = {
            foundColumn: "location",
            orderBy: "m_006p_time asc",
            prefix: "manage",
            queries: [
              {
                limit: 30,
                metric: "pid,name,m_007p,m_006p,m_008p,m_001elec, m_006p_time",
                offset: 0,
                schema: "monitor"
              }
            ],
            search: "",
            searchName: "",
            table: "MeasuredPoint",
            type: "lastest"
          };
          axios.post("/open/queryDb", queryJson).then(res => {
            this.tableData = res.data.filter(v => nameList.indexOf(v.name) > -1);
            this.nameList.forEach((v, i) => {
              this.tableData.forEach(v2 => {
                if (v.pid == v2.pid) {
                  this.nameList[i]['m_001t'] = `<span class="default">--</span>`;; // 参数名待定
                  this.nameList[i]['m_002t'] = `<span class="default">--</span>`;; // 参数名待定
                  this.nameList[i]['m_006p'] = this.formatVal(v2['m_006p']);
                  this.nameList[i]['m_007p'] = this.formatVal(v2['m_007p']);
                  this.nameList[i]['m_008p'] = `<span class="default">--</span>`;; // 参数名待定
                }
              })
              if (!('m_006p' in this.nameList[i])) {
                this.nameList[i]['m_001t'] = `<span class="default">--</span>`;
                this.nameList[i]['m_002t'] = `<span class="default">--</span>`;
                this.nameList[i]['m_006p'] = `<span class="default">--</span>`;
                this.nameList[i]['m_007p'] = `<span class="default">--</span>`;
                this.nameList[i]['m_008p'] = `<span class="default">--</span>`;
              }
            })
            this.nameList.forEach((v, i) => {
              this.warnList.forEach(v2 => {
                if (v.pid == v2.pid) {
                  let code = v2.code;
                  let codeList = code.split('-');
                  if (codeList[4] == '003') { // 流量
                    // let m001q = this.delSpan(this.nameList[i]['m001q'])
                    // this.nameList[i]['m001q'] = this.formatVal(m001q, String(v2.bound));
                  } else if (codeList[4] == '004') { // 供水温度
                    // let m001t = this.delSpan(this.nameList[i]['m001t']);
                    // this.nameList[i]['m001t'] = this.formatVal(m001t, String(v2.bound));
                  } else if (codeList[4] == '005') { // 回水温度
                    // let m002t = this.delSpan(this.nameList[i]['m002t']);
                    // this.nameList[i]['m002t'] = this.formatVal(m002t, String(v2.bound));
                  } else if (codeList[4] == '006') { // 供水压力
                    let m_006p = this.delSpan(this.nameList[i]['m_006p']);
                    this.nameList[i]['m_006p'] = this.formatVal(m001p, String(v2.bound));
                  } else if (codeList[4] == '007') { // 回水压力
                    let m_007p = this.delSpan(this.nameList[i]['m_007p']);
                    this.nameList[i]['m_007p'] = this.formatVal(m_007p, String(v2.bound));
                  }
                }
              })
            })
            aaa = this.nameList.map(v => Object.values(v).splice(1))
            this.datalist = aaa;
            this.$nextTick(() => {
              document.querySelector('.img2').style.width = this.getscalepx(100);
              let defaultList = document.querySelectorAll('.default');
              let name = document.querySelectorAll('.name');
              let low = document.querySelectorAll('.low');
              let high = document.querySelectorAll('.high');
              let head = document.querySelectorAll('.head');
              defaultList.forEach(v => {
                v.style.fontSize = this.getscalepx(12);
              })
              name.forEach(v => {
                v.style.fontSize = this.getscalepx(10);
                v.style.marginTop = this.getscalepx(5);
                v.parentNode.style.width = '100%';
                v.parentNode.style.textAlign = 'left';
                v.parentNode.style.paddingLeft = this.getscalepx(20);
              })
              low.forEach(v => {
                v.style.fontSize = this.getscalepx(20);
              })
              high.forEach(v => {
                v.style.fontSize = this.getscalepx(20);
              })
              head.forEach(v => {
                v.style.fontSize = this.getscalepx(10);
                v.style.marginTop = this.getscalepx(5);
              })
            })
          });
        })
      })
    },
    formatVal(item, type) {
      if (type) {
        if (type === '1') {
          return (
            `<span class="high">${item}</span>`
          );
        } else if (type === '0') {
          return (
            `<span class="low">${item}</span>`
          );
        }
      } else {
        if (item === null || item === undefined || item == Infinity) {
          return `<span class="default">--</span>`;
        } else {
          return `<span class="default">${item}</span>`;
        }
      }
      
    },
    // 取html字符串中的值
    delSpan(item) {
      if (item.indexOf('span') > -1) {
        return item.split('</span>')[0].split('>').pop();
      } else {
        return item;
      }
    }
  },
  destroyed() {
    clearInterval(this.interval)
  }
};
</script>
<style lang='scss'>
.high {
  color: #ECAE33;
}
.low {
  color: #5BFBCC;
}
.default {
  color: #E1EBF2;
}
.head {
  color: #fff;
}
</style>